<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>

        <title>Title</title>
        <script src="../../js/jquery-3.3.1.min.js" charset="utf-8"></script>
        <script src="../../js/cookie/jquery.cookie.js" charset="utf-8"></script>
        <script src="../../layui-v2.4.5/layui/layui.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../../layui-v2.4.5/layui/css/layui.css" media="all">
        <script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></script>

        <script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.9/moxie.js"></script>
        <script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.9/plupload.dev.js"></script>
        <script type="text/javascript" src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>


</head>
<body>
<form class="layui-form" action="">

    <input type="hidden" name="id" value="${id}"> <%--分类级别--%>
    <input type="hidden" name="logo" id="logo" value="${classRecord.logo}">
    <div class="layui-form-item">
        <label class="layui-form-label">上级分类</label>
        <div class="layui-input-block">
            <select name="parentId" lay-verify="required">
                <option value="0">无上级</option>
                <c:forEach items="${classRecord.parentList}" var="oneList">
                    <c:if test="${oneList.id !=classRecord.id}">
                    <option value="${oneList.id}"
                                <c:if test="${oneList.id eq parentId}">
                                    selected="selected"
                                </c:if>
                    >${oneList.name}</option>
                    </c:if>
                </c:forEach>

            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">类别名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" required
                   value="${classRecord.name}"
                   lay-verify="required" placeholder="类别名称" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">类别序号</label>
        <div class="layui-input-block">
            <input type="text" name="number" required
                   value="${classRecord.number}"
                   lay-verify="required|number" placeholder="类别序号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 7rem">
        <div class="layui-upload" id="container">
            <button type="button" class="layui-btn" id="pickfiles">类别logo</button>
            <input type="hidden"  id="qiniuKey" value="/logo/">
            <input type="hidden" id="logo" value="">

            <div class="layui-upload-list">
                <img class="layui-upload-img"
                     src="${classRecord.logo}"
                     id="demo1" style="height: 6rem;width: 6rem">
                <p id="demoText"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));


            $.ajax({
                url: '/shop/saveClass',
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: data.field,
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                beforeSend: function (xhr) {
                    /*console.log(xhr)
                    console.log('发送前')*/
                },
                success: function (data) {
                    console.log(data);
                    if (data.code == '000000') {
                        layer.msg(data.msg, {time: 1000, icon: 6}, function () {
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(data.msg, {time: 1000, icon: 5});
                    }
                },
                error: function (xhr, textStatus) {
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                },
                complete: function () {
                    //console.log('结束')
                }
            })
            return false;
        });
    });


    <%--layui.use('upload', function () {--%>
        <%--var $ = layui.jquery--%>
            <%--, upload = layui.upload;--%>
        <%--//普通图片上传--%>
        <%--var uploadInst = upload.render({--%>
            <%--elem: '#test1'--%>
            <%--, url: '/shop/classTypeImgUpload?commodityId=${classRecord.id}'--%>
            <%--, before: function (obj) {--%>
                <%--//预读本地文件示例，不支持ie8--%>
                <%--obj.preview(function (index, file, result) {--%>
                    <%--$('#demo1').attr('src', result); //图片链接（base64）--%>
                <%--});--%>
            <%--}--%>
            <%--, done: function (res) {--%>
                <%--//如果上传失败--%>
                <%--if (res.code != 0) {--%>
                    <%--return layer.msg('上传失败');--%>
                <%--}--%>
                <%--$("#logo").val(res.data.src);--%>
                <%--layer.msg('上传成功');--%>
                <%--//上传成功--%>
            <%--}--%>
            <%--, error: function () {--%>
                <%--//演示失败状态，并实现重传--%>
                <%--var demoText = $('#demoText');--%>
                <%--demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');--%>
                <%--demoText.find('.demo-reload').on('click', function () {--%>
                    <%--uploadInst.upload();--%>
                <%--});--%>
            <%--}--%>
        <%--});--%>

    <%--});--%>
</script>

</body>

<script type="text/javascript" src="/admin/js/qiniu.js"></script>

</html>
